Skip to content

feat: add react-native-splash-view for customizable native splash screens#1601

Merged
Simek merged 4 commits intoreact-native-community:mainfrom
jagnesh:patch-1
Apr 26, 2025
Merged

feat: add react-native-splash-view for customizable native splash screens#1601
Simek merged 4 commits intoreact-native-community:mainfrom
jagnesh:patch-1

Conversation

@jagnesh
Copy link
Copy Markdown
Contributor

@jagnesh jagnesh commented Apr 26, 2025

📝 Why & How

This PR adds [react-native-splash-view](https://github.com/jagnesh/react-native-splash-view) to the libraries list.

  • react-native-splash-view provides a customizable native splash screen for React Native apps.
  • Supports both iOS and Android platforms.
  • Works with the New Architecture (Fabric & TurboModules).

📦 Installation

Using npm:

npm install react-native-splash-view

Using yarn:

yarn add react-native-splash-view

🛠️ Setup Instructions

📱 iOS Setup

1️⃣ Install CocoaPods dependencies:

cd ios && pod install --repo-update && cd ..

2️⃣ Ensure SplashView is correctly linked.

3️⃣ Create a Storyboard (LaunchScreen.storyboard) in Xcode and set the Storyboard Name to LaunchScreen.

4️⃣ Modify AppDelegate to programmatically show the splash:

Swift:

import UIKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(_ application: UIApplication,
                     didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        showSplashScreen()
        return true
    }

    private func showSplashScreen() {
        DispatchQueue.main.async {
            if let splashClass = NSClassFromString("SplashView") as? NSObject.Type,
               let splashInstance = splashClass.perform(NSSelectorFromString("sharedInstance"))?.takeUnretainedValue() as? NSObject {
                splashInstance.perform(NSSelectorFromString("showSplash"))
            }
        }
    }
}

Objective-C:

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"yourapp";
  self.initialProps = @{};

  [self showSplashScreen];
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

- (void)showSplashScreen {
    dispatch_async(dispatch_get_main_queue(), ^{
        Class splashClass = NSClassFromString(@"SplashView");
        if (splashClass) {
            id splashInstance = [splashClass performSelector:NSSelectorFromString(@"sharedInstance")];
            if (splashInstance && [splashInstance respondsToSelector:NSSelectorFromString(@"showSplash")]) {
                [splashInstance performSelector:NSSelectorFromString(@"showSplash")];
            }
        }
    });
}
@end

🤖 Android Setup

1️⃣ Create a launch_screen.xml in android/app/src/main/res/layout/launch_screen.xml:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@drawable/splash_logo" />
</FrameLayout>

2️⃣ (Optional) Define a custom theme SplashViewTheme in styles.xml:

<resources>
  <style name="SplashViewTheme" parent="Theme.AppCompat.NoActionBar">
    <item name="android:windowExitAnimation">@android:anim/fade_out</item>
    <item name="android:windowLightStatusBar">true</item>
  </style>
</resources>

3️⃣ Modify MainActivity.kt:

package com.example

import android.os.Bundle
import com.facebook.react.ReactActivity
import com.splashview.SplashView

class MainActivity : ReactActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        SplashView.showSplashView(this)
        super.onCreate(savedInstanceState)
    }
}

🚀 Usage

Basic Example:

import { hideSplash, showSplash } from 'react-native-splash-view';

// Manually show splash (optional)
showSplash();

useEffect(() => {
    setTimeout(() => {
      hideSplash();
    }, 5000);
}, []);

⚙️ API

Method Description
showSplash() Shows the splash screen
hideSplash() Hides the splash screen

🐞 Troubleshooting

1️⃣ Cannot find SplashView in Pods (iOS)?

cd ios && pod install --repo-update && cd ..

2️⃣ SplashView not found in MainActivity.kt (Android)?

cd android && ./gradlew clean && cd ..
npx react-native run-android

💡 Contributing

Feel free to open issues and pull requests! Contributions are welcome.


✅ Checklist

  • Added library to react-native-libraries.json
  • Updated library version if already present.
  • Documented installation & setup steps.
  • Included basic usage example.
  • Confirmed support for both Android and iOS.

    "githubUrl": "https://github.com/jagnesh/react-native-splash-view",
    "npmPkg": "react-native-splash-view",
    "android": true,
    "ios": true,
@jagnesh jagnesh changed the title Update react-native-libraries.json feat: add react-native-splash-view for customizable native splash screens Apr 26, 2025
Copy link
Copy Markdown
Member

@Simek Simek left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @jagnesh, thanks for adding a new entry to the directory! 👍

@Simek Simek merged commit fbdbb5e into react-native-community:main Apr 26, 2025
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants